<template>
  <div class="Home">
    <div class="search-bar">
      <div class="search-bar__item icon" @click="show = !show">
        <Icon name="bars" size="22px" />
      </div>
      <div class="search-bar__item search">
        <Search
          v-model="value"
          shape="round"
          background="transparent"
          placeholder="请输入搜索关键词"
        />
      </div>
      <div class="search-bar__item icon">
        <Icon name="audio" size="22px" />
      </div>
    </div>
    <Popup v-model:show="show" position="left" :style="{ width: '180px', height: '100%' }"
      >内容</Popup
    >

    <div class="swiper">
      <Swipe class="swipe" :autoplay="3000" indicator-color="white">
        <SwipeItem>1</SwipeItem>
        <SwipeItem>2</SwipeItem>
        <SwipeItem>3</SwipeItem>
        <SwipeItem>4</SwipeItem>
      </Swipe>
    </div>
    <div class="category">
      <div class="category__item">
        <div class="category__item__icon today">{{ getToday }}</div>
        <p class="category__item__label">每日推荐</p>
      </div>
      <div class="category__item">
        <p class="category__item__icon"><Icon name="user-o" size="22px" /></p>
        <p class="category__item__label">私人FM</p>
      </div>
      <div class="category__item">
        <p class="category__item__icon"><Icon name="music-o" size="22px" /></p>
        <p class="category__item__label">歌单</p>
      </div>
      <div class="category__item">
        <p class="category__item__icon"><Icon name="bar-chart-o" size="22px" /></p>
        <p class="category__item__label">排行榜</p>
      </div>
      <div class="category__item">
        <p class="category__item__icon"><Icon name="fire-o" size="22px" /></p>
        <p class="category__item__label">话题</p>
      </div>
    </div>

    <video id="video" style="width: 100%" controls></video>

    <Frame title="推荐歌单">
      <div class="playlist">
        <PlayList></PlayList>
        <PlayList></PlayList>
        <PlayList></PlayList>
        <PlayList></PlayList>
      </div>
    </Frame>

    <Frame title="精选MV">
      <div class="playlist">
        <PlayList></PlayList>
        <PlayList></PlayList>
        <PlayList></PlayList>
        <PlayList></PlayList>
      </div>
    </Frame>

    <Tabbar v-model="active">
      <TabbarItem icon="home-o">标签</TabbarItem>
      <TabbarItem icon="search">标签</TabbarItem>
      <TabbarItem icon="friends-o">标签</TabbarItem>
      <TabbarItem icon="setting-o">标签</TabbarItem>
    </Tabbar>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue'
import { Tabbar, TabbarItem, Swipe, SwipeItem, Icon, Search, Popup } from 'vant'
import dayjs from 'dayjs'
import Frame from '@components/Frame.vue'
import PlayList from '@components/PlayList.vue'
import { createFFmpeg } from '@ffmpeg/ffmpeg'
import configInfo from '@http/config'

const ffmpeg = createFFmpeg({ log: true })

export default defineComponent({
  name: 'Home',
  components: { Tabbar, TabbarItem, Swipe, SwipeItem, Icon, Search, Popup, Frame, PlayList },
  setup() {
    const getToday = computed(() => dayjs(new Date()).date())
    const active = ref(0)

    const show = ref(false)

    return {
      getToday,
      active,
      show
    }
  },
  mounted() {
    this.setMp4()
  },
  methods: {
    async setMp4() {
      const file = await fetch(`${configInfo.baseUrl}/test.avi`)
        .then((res) => res.arrayBuffer())
        .catch((err) => {
          console.log('请求文件错误', err)
        })
      const name = 'input.avi'

      await ffmpeg.load().catch((err) => {
        console.log('转换程序加载错误', err)
      })

      if (file) {
        // 把 AVI 写入 FFmpeg 文件系统
        ffmpeg.FS('writeFile', name, new Uint8Array(file, 0, file.byteLength))

        ffmpeg
          .run('-i', name, 'output.mp4')
          .then(() => {
            const output = ffmpeg.FS('readFile', 'output.mp4')

            const video = document.getElementById('video') as HTMLVideoElement
            video.src = URL.createObjectURL(new Blob([output.buffer], { type: 'video/mp4' }))
          })
          .catch((err) => {
            console.log('转换执行错误', err)
          })
      }
    }
  }
})
</script>

<style lang="less" scoped>
.Home {
  width: 100%;
  @bg-color: #f7f8fa;

  .swiper {
    padding: 12px;
    padding-top: 4px;

    .swipe {
      border-radius: 20px;
      overflow: hidden;

      .van-swipe-item {
        width: 100%;
        color: #fff;
        font-size: 20px;
        line-height: 120px;
        text-align: center;
        background-color: @bg-color;
      }
    }
  }

  .search-bar {
    margin-top: 4px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 100;

    .search {
      flex: 1;
    }

    .icon {
      &:first-child {
        padding-left: 10px;
      }
      &:last-child {
        padding-right: 10px;
      }
    }
  }

  .category {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 4px 12px;
    margin-bottom: 6px;
    overflow: hidden;

    .category__item {
      flex: 1;
      display: flex;
      align-items: center;
      flex-direction: column;
      flex-shrink: 0;

      .category__item__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: @bg-color;
        padding: 12px;
        border-radius: 50%;
        width: 20px;
      }
      .category__item__label {
        margin-top: 4px;
        font-size: 14px;
      }
    }

    .today {
      font-weight: bold;
    }
  }

  .playlist {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .playlist__item {
      margin-bottom: 14px;

      &:not(:nth-child(3n)) {
        margin-right: 10px;
      }
    }
  }
}
</style>
